import React, { Component } from 'react';
// import logo from '../assets/seckill.png';
import { user_category, user_subcate } from '../utils/api'
import ClassifyListLeft from './ClassifyListLeft';
import ClassifyListRight from './ClassifyListRight';
class ClassifyList extends Component {
    constructor(props) {//组件创建时会被调用,自动执行
        super(props);//constructor下第一行应该写;
        this.state = {//定义组件的状态
            currentIndex: 0,//保存下标
            categorylist: [],
            subcatelist: []
        }
    }
    componentDidMount() {
        user_category().then((res) => {
            if (res.data.code === 200) {

                this.setState({
                    categorylist: res.data.list
                },
                    () => {
                        user_subcate({ id: this.state.categorylist[0].id }).then((res) => {

                            if (res.data.code === 200) {

                                this.setState({
                                    subcatelist: res.data.subcate.subcategory
                                })

                            }

                        })
                    }
                )
            }
        })

    }
    handleClick(index) {

        this.setState({
            currentIndex: index
        })

        user_subcate({ id: this.state.categorylist[index].id }).then((res) => {

            if (res.data.code === 200) {

                this.setState({
                    subcatelist: res.data.subcate.subcategory
                })

            }
            console.log(111, this.state.subcatelist);
        })

    }
    render() {
        return (
            <div className='ClassifyList'>

                <ClassifyListLeft categorylist={this.state.categorylist} currentIndex={this.state.currentIndex} handleClick={this.handleClick.bind(this)}></ClassifyListLeft>

                <ClassifyListRight subcatelist={this.state.subcatelist}></ClassifyListRight>



                {/* 不拆分组件的情况
                <div className='left'>
                    {
                       this.state.categorylist.map((item,index)=>{
                        return (
                            <div key={index}
                            onClick={ ()=>{ this.handleClick(index) } }
                            className={ 'btn '+(this.state.currentIndex==index?"active":"") } 
                            >
                                {item.name}
                            </div>
                        )
                       }) 
                    }
                </div>
                <div className='right'>
                    {
                        this.state.tabs[this.state.currentIndex].list.map((item,index)=>{
                            return (
                                <div className='cate' key={index}>
                                    <img src={item.pic} alt="" />
                                    <div>{item.name}</div>
                                </div>
                            )
                        })
                    }
                </div> */}

            </div>
        );
    }
}

export default ClassifyList;